<template>
  <nav class="navbar navbar-expand fixed-bottom px-5" style="background-color: var(--td-error-color-8)">
    <view class="container-fluid">
      <view class="navbar-nav w-100 justify-content-between">
        <router-link 
          v-for="(item, index) in navItems" 
          :key="index"
          :to="item.path" 
          class="nav-link text-center animate__animated animate__fadeInUp"
          :class="[`nav-item-${index + 1}`, { active: isCurrentRoute(item.path) }]"
          active-class="active">
          <template v-if="isCurrentRoute(item.path) && item.activeIcon">
            <image :src="url('activeicon',item.activeIcon, 'png')" class="  nav-icon" alt="icon"/>
          </template>
          <i v-else :class="item.icon" class="d-block"></i>
          <p  :class="[{ show: isCurrentRoute(item.path) }]">{{ item.label }}</p>
        </router-link>
      </view>
    </view>
  </nav>
</template>

<script setup>
import { ref } from 'vue';
import { useRoute } from 'vue-router';

const route = useRoute();
const url = $url;

const navItems = [
  { path: '/', label: '主页', icon: 'bi bi-house-door', activeIcon: '0' },
  { path: '/shop', label: '商城', icon: 'bi bi-shop', activeIcon: '1' },
  { path: '/ar', label: 'AR傩面', icon: 'bi bi-camera', activeIcon: '2' },
  { path: '/culture', label: '文化', icon: 'bi bi-book', activeIcon: '3' },
  { path: '/my', label: '我的', icon: 'bi bi-person', activeIcon: '4' }
];

const isCurrentRoute = (path) => {
  return route.path === path;
};
</script>

<style scoped>
.nav-icon {
  width:2rem;
  height: 2rem;

}

.nav-link {
  color: #e2e2e2;
  padding: 0.5rem 1rem;
}

.nav-link i {
  font-size: 1.25rem;
  margin-bottom: 0.25rem;
}

.nav-link text  {
  font-size: 0.75rem;
}

.nav-link.active {
  color: #fd350d !important;
}
/* .show{
  display: none;
} */
.navbar {
  padding: 0.5rem 0;
  box-shadow: 0 -2px 10px rgba(0, 0, 0, 0.1);
}

.nav-item-1 {
  animation-delay: 0.1s;
}

.nav-item-2 {
  animation-delay: 0.2s;
}

.nav-item-3 {
  animation-delay: 0.3s;
}

.nav-item-4 {
  animation-delay: 0.4s;
}
</style>
